<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://fonts.font.im/css?family=Do+Hyeon" rel="stylesheet">
    <style>
       *{
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }
       body{
           height: 100vh;
           display: flex;
           align-items: center;
           justify-content: center;
           background-color: rgb(243, 239, 8);
       }
       .anniu,.anniu::after{
           font-family: 'Do Hyeon', sans-serif;
           width: 260px;
           height: 80px;
           text-align: center;
           font-size: 22px;
           line-height: 80px;
           color: rgb(255, 251, 251);
           background: linear-gradient(30deg,transparent 10%,rgb(255, 136, 0) 10% 95%,  rgb(0, 255, 149) 95%);
           box-shadow: 5px 0 0 rgb(0, 204, 255);
           cursor: pointer;
           position: relative;
       }
       .anniu::after{
           content: 'Aurora Borealis night';
           position: absolute;
           top: 0;
           left: 0;
           text-shadow: -5px -2px 0 rgb(0, 183, 255),
           5px 2px 0 rgb(0, 255, 115) ;
           visibility: hidden;
          
       } 
       .anniu:hover::after{
           animation: san 1s ; 
           animation-timing-function: steps(1, end);
       }

       /* 
       
       clip-path: inset(20% -5px  60%  0);
       clip-path: inset(50% -5px  30%  0);
       clip-path: inset(80% -5px  5%  0);
       clip-path: inset(0 -5px  80%  0);
       
       
        */
       @keyframes san{
           0%{
            clip-path: inset(20% -5px  60%  0);
            transform: translate(-6px,5px);
            visibility: visible;
           }
           10%{
            clip-path: inset(50% -5px  30%  0);
            transform: translate(6px,-5px);
           }
           20%{
            clip-path: inset(20% -5px  60%  0);
            transform: translate(5px,0px);

            }
            30%{
                clip-path: inset(80% -5px  5%  0);
            transform: translate(-8px,5px);
            }
            40%{
                clip-path: inset(0 -5px  80%  0);
            transform: translate(-4px,-3px);

            }
            50%{
                clip-path: inset(50% -5px  30%  0);
            transform: translate(-6px,-5px);
            }
            60%{
                clip-path: inset(80% -5px  5%  0);
            transform: translate(-7px,5px);

            }
            70%{
                clip-path: inset(0 -5px  80%  0);
            transform: translate(3px,6px);
            }
            80%{
                clip-path: inset(50% -5px  30%  0);
            transform: translate(5px,5px);

            }
            90%{
                clip-path: inset(20% -5px  60%  0);
            transform: translate(6px,-5px);

            }
            100%{
                clip-path: inset(0 -5px  80%  0);
            transform: translate(1px,5px);

            }
       }
    </style>
</head>
<body>
    <div class="anniu">Aurora Borealis night</div>
</body>
</html>